<template>
    <div class="container">
        <HeaderBar />
        <div class="user_info">
            <div class="user_info_main">
                <img
                    src="https://adminimage.oss-cn-hangzhou.aliyuncs.com/images/timg.jpeg"
                    class="user_info_main_logo"
                />
                <div class="user_info_main_detail">
                    <div class="user_info_main_detail_type">
                        {{userInfo.name}}
                        <label>{{roleText[userInfo.role]}}</label>
                    </div>
                    <div class="user_info_main_detail_phone">{{phone}}</div>
                </div>
            </div>
            <div class="user_info_operate">
                <div class="user_info_operate_item" @click="addressList">
                    <img
                        class="user_info_operate_item_icon"
                        src="../../assets/images/user/location.png"
                    />
                    我的收货地址
                </div>
                <div class="user_info_operate_item" @click="changePwd">
                    <img
                        class="user_info_operate_item_icon"
                        src="../../assets/images/user/pwd.png"
                    />
                    修改密码
                </div>
            </div>
        </div>
        <div class="container_main">
            <div class="container_main_title">我的订单</div>
            <div class="container_main_order">
                <div class="container_main_order_item" @click="showOrderList(1)">
                    <img
                        src="../../assets/images/user/yixiadan.png"
                        class="container_main_order_item_icon"
                    />
                    <label v-if="tradeNum[1] > 0">{{tradeNum[1]}}</label>
                    <p class="container_main_order_item_name">已下单</p>
                </div>
                <div class="container_main_order_item" @click="showOrderList(2)">
                    <img
                        src="../../assets/images/user/yiqianyue.png"
                        class="container_main_order_item_icon"
                    />
                    <label v-if="tradeNum[2] > 0">{{tradeNum[2]}}</label>
                    <p class="container_main_order_item_name">已签约</p>
                </div>
                <div class="container_main_order_item" @click="showOrderList(3)">
                    <img
                        src="../../assets/images/user/yifahuo.png"
                        class="container_main_order_item_icon"
                    />
                    <label v-if="tradeNum[3] > 0">{{tradeNum[3]}}</label>
                    <p class="container_main_order_item_name">已发货</p>
                </div>
                <div class="container_main_order_item" @click="showOrderList(4)">
                    <img
                        src="../../assets/images/user/yiwancheng.png"
                        class="container_main_order_item_icon"
                    />
                    <label v-if="tradeNum[4] > 0">{{tradeNum[4]}}</label>
                    <p class="container_main_order_item_name">已完成</p>
                </div>
                <div class="container_main_order_item" @click="showOrderList(5)">
                    <img
                        src="../../assets/images/user/yiquxiao.png"
                        class="container_main_order_item_icon"
                    />
                    <label v-if="tradeNum[5] > 0">{{tradeNum[5]}}</label>
                    <p class="container_main_order_item_name">已取消</p>
                </div>
            </div>
            <section v-if="userInfo.role == 1">
                <div class="container_main_title">
                    我的积分
                    <div class="container_main_title_info" @click="rewardDetail">
                        <img
                            src="../../assets/images/user/jifen.png"
                            class="container_main_title_info_icon"
                        />
                        积分明细
                    </div>
                </div>
                <div class="container_main_jifen">
                    <div class="container_main_jifen_item">
                        <div class="container_main_jifen_item_name">我的积分</div>
                        <div class="container_main_jifen_item_detail">
                            <div class="container_main_jifen_item_detail_value">{{rewardInfo.accountAmount}}</div>
                            <!-- <div class="container_main_jifen_item_detail_value">{{rewardInfo.usableAmount}}</div> -->
                            <div class="container_main_jifen_item_detail_charge" @click="charge">申请兑换</div>
                        </div>
                    </div>
                    <div class="container_main_jifen_item">
                        <div class="container_main_jifen_item_name">累计积分</div>
                        <div class="container_main_jifen_item_value">{{rewardInfo.totalAmount}}</div>
                    </div>
                    <div class="container_main_jifen_item">
                        <div class="container_main_jifen_item_name">兑换中</div>
                        <div class="container_main_jifen_item_value">{{rewardInfo.usingAmount}}</div>
                    </div>
                    <div class="container_main_jifen_item">
                        <div class="container_main_jifen_item_name">已兑积分</div>
                        <div class="container_main_jifen_item_value">{{rewardInfo.usedAmount}}</div>
                    </div>
                </div>
                <div class="container_main_title">
                    <div class="container_main_title_l">
                        我邀请的用户
                        <div 
                            class="invite"
                            v-clipboard:copy="invitelink"
                            v-clipboard:success="onCopy"
                            v-clipboard:error="onError"
                        >邀请好友</div>
                    </div>
                    <div class="container_main_title_info">
                        累计邀请<label>{{inviteTotal}}</label>人
                    </div>
                </div>
                <div class="container_main_invite" v-if="inviteList.length > 0">
                    <div
                        class="container_main_invite_item"
                        v-for="item in inviteList"
                        :key="item.id"
                    >
                        <div class="container_main_invite_item_user">{{item.username}}{{item.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}</div>
                        <div class="container_main_invite_item_type">{{roleText[item.role]}}</div>
                        <div class="container_main_invite_item_ctime">{{item.createTime}}</div>
                    </div>
                </div>
            </section>
        </div>
        <el-dialog
            :visible.sync="modal"
            title="申请兑换"
            width="540px"
        >
            <div class="model_content">
                <el-input
                    type="number"
                    v-model="amount"
                    :placeholder="rewardText"
                    style="width: 460px; height: 50px;margin-bootom: 25px"
                />
                <div class="model_content_tip">不可兑换积分 {{rewardInfo.frozenAmount}}</div>
                <div class="model_content_note">
                    <img
                        src="../../assets/images/user/note.png"
                        class="model_content_note_icon"
                    />
                    此积分对应订单还未完成，不支持兑换
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import HeaderBar from '@components/HeaderBar';
import {
    GetRewardMy,
    GetUserRecommendList,
    GetTradeNum,
    PostRewardApply,
    GetRewardUsedList
} from '@api/api';
export default {
    data() {
        return {
            value: '',
            modal: false,
            userInfo: null,
            phone: '',
            inviteList: [],
            inviteTotal: null,
            roleText: {
                0: '其他',
                1: '设计师',
                2: '业主',
                3: '销售'
            },
            rewardInfo: {
                frozenAmount: null,
                id: null,
                totalAmount: null,
                unusedAmount: null,
                usableAmount: null,
                usedAmount: null,
            },
            rewardText: '',
            pageNo: 1,
            pageSize: 10,
            tradeNum: {},
            invitelink: '',
            amount: '',
            used: ''
        }
    },
    components: {
        HeaderBar,
    },
    created () {
        let userInfo = null;
        let phone = '';
        if (localStorage.getItem('userInfo')) {
            userInfo = JSON.parse(localStorage.getItem('userInfo'));
            phone = userInfo.phone;
            let pat = /(\d{3})\d*(\d{4})/;
            this.phone = phone.replace(pat,'$1****$2');
        }
        this.userInfo = userInfo;
        this.getRewardInfo();
        this.getRecommendList();
        this.getTradeCount();
        let url = window.location.href.split('#')[0];
        let user = JSON.parse(localStorage.getItem('userInfo'));
        let userphone = user.phone;
        let str64 = window.btoa(userphone);
        this.invitelink = `${url}#/?inviteCode=${str64}`;
    },
    methods: {
        onCopy: function (e) {
            this.$message({
                message: '邀请链接复制成功,去邀请好友吧',
                type: 'success'
            });
        },
        onError: function (e) {
            this.$message.error('邀请链接复制失败');
        },
        getRewardInfo () {
            let _this = this;
            GetRewardMy()
                .then(res=>{
                    console.log('res', res);
                    _this.rewardInfo = res.data;
                    _this.rewardText = `最高可兑换${res.data.unusedAmount}`;
                    GetRewardUsedList()
                        .then(response=>{
                            let used = 0;
                            response.data.forEach(item => {
                                used = used + Number(item.amount) * -1;
                            });
                            _this.rewardText = `最高可兑换${res.data.usableAmount}`;
                        });
                });
        },
        back() {
            this.$router.go(-1);
        },
        charge() {
            this.modal = true;
        },
        ok() {
            this.modal = false;
        },
        cancel() {
            this.modal = false;
        },
        submit() {
            if(this.amount == '') {
                this.$message.error('请输入兑换积分!');
                return;
            }
            let params = {
                amount: this.amount
            }
            PostRewardApply(params)
                .then(res=>{
                    this.$message({
                        message: '申请成功!',
                        type: 'success'
                    });
                    this.getRewardInfo();
                    this.getRecommendList();
                    this.getTradeCount();
                    this.modal = false;
                });
        },
        addressList() {
            this.$router.push({path: '/user/address'});
        },
        changePwd() {
            this.$router.push({path: '/user/findPwd'});
        },
        rewardDetail() {
            this.$router.push({path: '/exchange'})
        },
        getRecommendList() {
            GetUserRecommendList({pageSize: this.pageSize,pageNo: this.pageNo})
                .then(res=>{
                    this.inviteList = res.data;
                    this.inviteTotal = res.totalCount;
                });
        },
        getTradeCount() {
            GetTradeNum()
                .then(res=>{
                    console.log(res)
                    this.tradeNum = res.data;
                })
        },
        showOrderList(id) {
            this.$router.push({path: '/order', query: {status: id}});
        }
    }
}
</script>
<style>
body {
    background: #F6F6F6;
}
.ivu-modal-body {
    padding: 0;
}
</style>
<style scoped>
.user_info {
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40px 50px;
    margin-bottom: 49px;
}
.user_info_main {
    display: flex;
    align-items: center;
}
.user_info_main_logo {
    width: 75px;
    height: 75px;
    border-radius: 100%;
    margin-right: 43px;
}
.user_info_main_detail_type {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000000;
    margin-bottom: 12px;
}
.user_info_main_detail_type label {
    margin-left: 6px;
    width: 67px;
    text-align: center;
    line-height: 30px;
    height: 30px;
    background: #CEB68A;
    border-radius: 15px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
}
.user_info_main_detail_phone {
    height: 14px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    line-height: 30px;
}
.user_info_operate {
    display: flex;
}
.user_info_operate_item {
    cursor: pointer;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    display: flex;
    align-items: center;
}
.user_info_operate_item_icon {
    width: 19px;
    height: 22px;
    margin-right: 5px;
}
.user_info_operate_item:first-child {
    margin-right: 42px;
}
.container_main_title {
    text-indent: 14px;
    height: 24px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #1E252E;
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.container_main_title_l {
    display: flex;

}
.invite {
    width: 120px;
    height: 30px;
    background: #1D242D;
    border-radius: 15px;
    margin-left: 19px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #CEB68A;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    margin-left: 20px;
}
.container_main_title_info {
    cursor: pointer;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #1E252E;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.container_main_title_info_icon {
    width: 16px;
    height: 17px;
    margin-right: 7px;
}
.container_main_title_info label {
    color: #F19845;
}
.container_main_order {
    display: flex;
    align-items: center;
    background: #ffffff;
    height: 140px;
    margin-bottom: 48px;
}
.container_main_order_item {
    flex: 1;
    position: relative;
    text-align: center;
    cursor: pointer;
}
.container_main_order_item label {
    position: absolute;
    top: -3px;
    right: 42%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #E0201D;
    border-radius: 12px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFEFE;
}
.container_main_order_item_icon {
    width: 37px;
    height: 33px;
    margin-bottom: 16px;
}
.container_main_order_item_name {
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
}
.container_main_invite {
    height: 140px;
    background: #FFFFFF;
    padding: 30px 0;
    overflow-y: scroll;
}
.container_main_invite_item {
    display: flex;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #1E252E;
    margin-bottom: 29px;
}
.container_main_invite_item_type {
    flex: 1;
    text-align: center;
}
.container_main_invite_item_user {
    flex: 1;
    text-align: left;
    padding-left: 30px;
}
.container_main_invite_item_ctime {
    flex: 1;
    text-align: right;
    padding-right: 19px;
}
.container_main_jifen {
    height: 140px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    margin-bottom: 49px;
}
.container_main_jifen_item {
    flex: 1;
    text-align: center;
}
.container_main_jifen_item:first-child {
    text-align: left;
    padding-left: 49px;
}
.container_main_jifen_item:last-child {
    text-align: right;
    padding-right: 50px;
}
.container_main_jifen_item_name {
    margin-bottom: 19px;
}
.container_main_jifen_item_detail {
    display: flex;
    align-items: center;
}
.container_main_jifen_item_detail_value {
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #CEB68A;
}
.container_main_jifen_item_detail_charge {
    width: 89px;
    height: 30px;
    background: #1D242D;
    border-radius: 15px;
    margin-left: 19px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #CEB68A;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}
.container_main_jifen_item_value {
    height: 30px;
    line-height: 30px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #1D242D;
}
.model_content {
    padding: 29px 37px 108px 40px;
}
.model_content_tip {
    height: 16px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #1D242D;
    margin-bottom: 18px;
}
.model_content_note {
    display: flex;
    align-items: center;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #AFB1B9;
}
.model_content_note_icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;
}
</style>